<template>
    <div>
        <echarts :option="option" style="width:100%;height:420px;"></echarts>
    </div>
</template>
                
<script>
export default {
    props: ['optiontype'],
    data() {
        watchData: this.optiontype;
        return {
            option: {},
            optionbar: {
                title: {
                    text: ""
                },
                tooltip: {},
                legend: {
                    // data:['Sales']
                },
                xAxis: {
                    data: [], //横坐标显示的内容
                    show: false
                },
                yAxis: {},
                //配置样式
                itemStyle: {
                    //通常情况下：
                    normal: {
                        //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                        color: function(params) {
                            var colorList = ["#069f71"];
                            return colorList[
                                params.dataIndex % colorList.length
                            ];
                        }
                    },
                    //鼠标悬停时：
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: "rgba(0, 0, 0, 0.5)"
                    }
                },
                series: [
                    {
                        name: null,
                        type: "bar",
                        data: [] //数据
                    }
                ]
            },
            optionpie: {
                title: {
                    text: ""
                },
                tooltip: {
                    trigger: "item",
                    formatter: "{a}{b} : {c} ({d}%)"
                },
                series: [
                    {
                        name: null,
                        type: "pie",
                        radius: "55%",

                        itemStyle: {
                            normal: {
                                // 阴影的大小
                                shadowBlur: 500,
                                // 阴影水平方向上的偏移
                                shadowOffsetX: 0,
                                // 阴影垂直方向上的偏移
                                shadowOffsetY: 0,
                                // 阴影颜色
                                shadowColor: "rgba(0, 0, 0, 0)"
                                // label:{
                                //     show: true,
                                //     formatter: '{b} : {c} ({d}%)'
                                // },
                                // labelLine :{show:true}
                            }
                        },
                        data: []
                    }
                ]
            }
        };
    },
    components: {
        Echarts: re=> require(['&/Public/Echarts'],re)
    },
    computed: {
        watchData: function() {
            if (this.optiontype.type == "pie") {
                this.optionpie.series[0].data = [];
                for (
                    let index = 0;
                    index < this.optiontype.yAxis.length;
                    index++
                ) {
                    this.optionpie.series[0].data.push({
                        value: this.optiontype.yAxis[index],
                        name: this.optiontype.xAxis[index]
                    });
                }
                this.optionpie.title.text = this.optiontype.title;
                this.option = this.optionpie;
            }
            if (this.optiontype.type == "bar") {
                this.optionbar.xAxis.data = this.optiontype.xAxis;
                this.optionbar.series[0].data = this.optiontype.yAxis;
                this.optionbar.title.text = this.optiontype.title;
                this.option = this.optionbar;
            }
        }
    },
    mounted() {
        if (this.optiontype.type == "pie") {
            this.optionpie.series[0].data = [];
            for (let index = 0; index < this.optiontype.yAxis.length; index++) {
                this.optionpie.series[0].data.push({
                    value: this.optiontype.yAxis[index],
                    name: this.optiontype.xAxis[index]
                });
            }
            this.optionpie.title.text = this.optiontype.title;
            this.option = this.optionpie;
        }
        if (this.optiontype.type == "bar") {
            this.optionbar.xAxis.data = this.optiontype.xAxis;
            this.optionbar.series[0].data = this.optiontype.yAxis;
            this.optionbar.title.text = this.optiontype.title;
            this.option = this.optionbar;
        }
    },
    watch: {
        watchData() {}
    }
};
</script>